﻿<template>
    <div class="person">
        <h1>情况一:监视ref 定义的基本类型数据</h1>
        <h2>当前求和为{{ sum }}</h2>
        <button @click="changeSum">点击加1</button>
   </div>
</template>



<script lang = "ts" setup name="Person">
    // ref 基本类型 和对象类型
    // reactive 对象，Proxy 原生代理，reactive 是深层次的
    import { ref,reactive ,toRefs,computed,watch} from 'vue';
    let sum = ref(0)
    function changeSum(){
        sum.value+=1
    }
    // 停止监视
    const stopWatch = watch(sum,(nValue,oValue)=>{
        console.log('sum变化',nValue,oValue)
        if(nValue>=10){
            stopWatch()
        }
    })
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>